'use client'

import { useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

export default function MobileNav() {
  const [isOpen, setIsOpen] = useState(false)
  const pathname = usePathname()

  const menuItems = [
    { href: '/', label: 'HOME' },
    { href: '/shop', label: 'SHOP' },
    { href: '/cart', label: 'CART' },
    { href: '/order', label: 'ORDER' },
    { href: '/contact', label: 'CONTACT' },
    { href: '/faq', label: 'FAQ' },
  ]

  return (
    <div className="relative md:hidden">
      {/* Logo */}
      <div className="fixed top-4 left-4 z-50">
        <Link href="/" className="text-xl font-bold text-gray-800">
          H5 Voucher
        </Link>
      </div>

      {/* 汉堡菜单按钮 */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="fixed top-4 right-4 z-50 p-2 rounded-lg bg-white shadow-lg"
        aria-label="Toggle menu"
      >
        <div className="w-6 h-6 flex flex-col justify-around">
          <span className={`block w-6 h-0.5 bg-gray-600 transform transition-all duration-300 ${
            isOpen ? 'rotate-45 translate-y-2.5' : ''
          }`} />
          <span className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 ${
            isOpen ? 'opacity-0' : ''
          }`} />
          <span className={`block w-6 h-0.5 bg-gray-600 transform transition-all duration-300 ${
            isOpen ? '-rotate-45 -translate-y-2.5' : ''
          }`} />
        </div>
      </button>

      {/* 展开的菜单 */}
      <div
        className={`fixed inset-0 bg-white z-40 transform transition-transform duration-300 ease-in-out ${
          isOpen ? 'translate-x-0' : 'translate-x-full'
        }`}
      >
        <div className="pt-20 px-4">
          <nav className="space-y-1">
            {menuItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={`block px-4 py-3 rounded-lg ${
                  pathname === item.href
                    ? 'bg-[#ffe4ed] text-[#ff4d8c]'
                    : 'text-gray-600 hover:bg-[#fff5f8]'
                }`}
                onClick={() => setIsOpen(false)}
              >
                {item.label}
              </Link>
            ))}
          </nav>
        </div>
      </div>
    </div>
  )
} 